<template>
    <!-- <view
        class="reconcilia-item card-item"
        @click.native="easyGoTo('/pages_me/packet/reconcilia/detail?data=' + dataform)">
        <view class="item-header">
            <text class="type" :class="{ typeblock: data.BillType == '销售出库单' }">{{ data.BillType }}</text>
            <text class="number">单据编号：{{ data.BillCode }}</text>
        </view>
        <view class="item-main">
            <view class="left">
                <view class="left-top">
                    <view class="top-item">
                        <text class="item-title">单据金额</text>
                        <text class="item-price">{{ data.Total }}</text>
                    </view>
                    <view class="top-item">
                        <text class="item-title">优惠金额</text>
                        <text class="item-price">{{ data.Preferential }}</text>
                    </view>
                </view>
                <view class="left-bottom">
                    <text class="bottom-time">单据时间：{{ data.BillDate.slice(0, data.BillDate.length - 8) }}</text>
                </view>
            </view>
            <view
                class="right"
                :class="data.IsSettlement == 3 ? 'rightred' : data.IsSettlement == 1 ? 'rightgreen' : ''">
                <text class="item-title">结算金额</text>
                <text class="item-price">{{ data.SettlementTotal }}</text>
                <text class="btn" v-if="data.IsSettlement == 1">已结算完成</text>
                <text class="btn" v-if="data.IsSettlement == 2">结算未完成</text>
                <text class="btn" v-if="data.IsSettlement == 3">未结算</text>
            </view>
        </view>
    </view> -->
	<view class="custom-detail-list">
		<view class="item-card" @click="goDetail(data)">
		    <view class="flex-s-c">
		        <view class="left">
		            <view class="point"></view>
		            <view class="name">{{ data.BillName }}</view>
		        </view>
				<view class="price-wrapper">
				    本期实收：<text>￥{{ data.HjTotal }}</text>
				</view>
		        
		    </view>
		    <view class="list-item-content">
		        <view class="item">
		            <view class="left">收款单号</view>
		            <view class="rigth">{{ data.BillCode }}</view>
		        </view>
		        <view class="item">
		            <view class="left">创建时间</view>
		            <view class="rigth">{{ data.BillDate }}</view>
		        </view>
		        <view class="item" v-if="data.BillName !='销售收款单'">
		            <view class="left">数量</view>
		            <view class="rigth">{{ data.TotalQty }}</view>
		        </view>
				<view class="item" v-if="data.BillName=='标准应收单'">
				    <view class="left">本期应收</view>
				    <view class="rigth">{{ data.BdJsTotal }}</view>
				</view>
		        <view class="item">
		            <view class="left">期末应收</view>
		            <view class="rigth price">￥{{ data.WjsTotal }}</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
export default {
    props: ["data"],
    data() {
        return {
            dataform: "",
        }
    },
    mounted() {
        this.dataform = encodeURIComponent(JSON.stringify(this.data))
    },
    methods: {
		goDetail(data){
			if(data.IsLower==1){
				this.easyGoTo("/pages_me/packet/reconcilia/product-inventory?code="+data.OrderNo)
			}
		}
	},
}
</script>

<style lang="scss">
.reconcilia-item {
    flex-direction: column;
    padding: $app-page-padding;

    .item-header {
        margin-bottom: 20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        .type {
            display: flex;
            min-width: 110rpx;
            padding: 0 6rpx;
            height: 50rpx;
            justify-content: center;
            align-items: center;
            border-radius: 12rpx 0 12rpx 0;
            background: $color-yellow-1;
            margin-right: 20rpx;
            color: $color-white;
        }
        .typeblock {
            background: #000;
        }

        .number {
            display: flex;
            flex: 1;
            font-weight: 700;
        }
    }

    .item-main {
        display: flex;
        flex-direction: row;
        align-items: center;

        .left {
            flex: 1;
            background: $uni-bg-color-grey;
            border-radius: $border-radius-10;
            padding: $app-page-padding;
            height: 180rpx;
            justify-content: center;
            display: flex;
            flex-direction: column;

            .left-top {
                display: flex;
                flex-direction: row;
                margin-bottom: 40rpx;

                .top-item {
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
            }

            .item-title {
                color: $app-color-text-tip;
            }

            .item-price {
            }
        }

        .right {
            height: 180rpx;
            width: 200rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba($color-yellow-1, 0.1);
            border-radius: $border-radius-10;
            padding: $app-page-padding;

            .item-title {
                color: $color-yellow-1;
            }

            .item-price {
                color: $color-yellow-1;
                margin-bottom: 20rpx;
            }
            .btn {
                color: #ffffff;
                background: $color-yellow-1;
            }
        }

        .rightgreen {
            background: rgba($color-green, 0.1);
            .item-title {
                color: $color-green;
            }
            .item-price {
                color: $color-green;
                margin-bottom: 20rpx;
            }
            .btn {
                background: $color-green;
            }
        }
        .rightred {
            background: rgba($color-red-1, 0.1);
            .item-title {
                color: $color-red-1;
            }
            .item-price {
                color: $color-red-1;
                margin-bottom: 20rpx;
            }
            .btn {
                background: $color-red-1;
                border: $color-red-1;
            }
        }
    }

    .item-title {
        margin-bottom: 10rpx;
    }

    .item-price {
        font-size: $font-size-32;
        font-weight: 700;
    }
}
.custom-detail-list {
	margin-bottom: 24rpx;
    .left {
        display: flex;
        align-items: center;

        .point {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background-color: $app-color-main;
        }

        .name {
            margin-left: 12rpx;
            font-weight: 700;
        }
    }

    .price-wrapper {
        display: flex;
        align-items: center;

        text {
            font-size: 32rpx;
            font-weight: 700;
            color: $app-color-main;
        }
    }

    .item {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
            color: $app-color-main;
            font-weight: 700;
        }
    }
}
.item-card {
    // margin-top: 24rpx;
    padding: 24rpx;
    background: $color-white;
    border-radius: 24rpx;
    color: $color-gray-1;
    font-size: 28rpx;

    .list-item-content {
        display: flex;
        flex-direction: column;
        height: 278rpx;
        margin-top: 24rpx;
        border-radius: 12rpx;
        padding: 12rpx 32rpx;
        box-sizing: border-box;
        background-color: $color-gray-5;
    }
}
.flex-s-c{
	    display:flex;
	    justify-content: space-between;
	    align-items: center;
}
</style>
